<template>
  <el-card class="student-list-card">
    <template #header>
      <div class="card-header">
        <span>学员列表</span>
        <div class="header-actions">
          <el-input
            :model-value="searchQuery"
            placeholder="搜索学员"
            clearable
            style="width: 200px;"
            @update:model-value="$emit('update:searchQuery', $event)"
            @input="$emit('search-change', $event)"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="$emit('import-students')">
            <el-icon><UserFilled /></el-icon> 导入学员
          </el-button>
          <el-button type="success" @click="$emit('export-students')" :disabled="!students.length">
            <el-icon><Download /></el-icon> 导出学员
          </el-button>
          <el-button type="danger" @click="$emit('clear-students')" :disabled="!students.length">
            <el-icon><Delete /></el-icon> 清空学员
          </el-button>
        </div>
      </div>
    </template>
    
    <el-table
      v-loading="loading"
      :data="paginatedStudents"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="80" resizable></el-table-column>
      <el-table-column prop="studentId" label="学号" min-width="120" resizable></el-table-column>
      <el-table-column prop="name" label="姓名" min-width="100" resizable></el-table-column>
      <el-table-column label="队次" min-width="120" resizable>
        <template #default="scope">
          <span v-if="scope.row.className">{{ scope.row.className }}</span>
          <span v-else class="text-muted">--</span>
        </template>
      </el-table-column>
      <el-table-column label="专业" min-width="120" resizable>
        <template #default="scope">
          <span v-if="scope.row.majorName">{{ scope.row.majorName }}</span>
          <span v-else class="text-muted">--</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" resizable>
        <template #default="scope">
          <el-button 
            size="small" 
            type="danger" 
            @click="$emit('remove-student', scope.row)"
          >
            <el-icon><Delete /></el-icon> 移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :total="totalStudents"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="$emit('page-change', $event)"
      />
    </div>
  </el-card>
</template>

<script>
import { computed } from 'vue'
import { Search, UserFilled, Download, Delete } from '@element-plus/icons-vue'

export default {
  name: 'MissionStudentList',
  components: {
    Search,
    UserFilled,
    Download,
    Delete
  },
  props: {
    students: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    searchQuery: {
      type: String,
      default: ''
    },
    totalStudents: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  emits: [
    'update:searchQuery',
    'search-change',
    'import-students',
    'export-students',
    'clear-students',
    'remove-student',
    'page-change'
  ],
  setup(props) {
    // 计算分页后的学员数据
    const paginatedStudents = computed(() => {
      if (!Array.isArray(props.students)) return []
      
      const start = (props.currentPage - 1) * props.pageSize
      const end = start + props.pageSize
      return props.students.slice(start, end)
    })

    return {
      paginatedStudents
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.text-muted {
  color: #909399;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
